<template>
  <div class="online">
    <div class="online-nav">
      <!-- :goUrl="'/customerNotification?productId=' + $route.query.productId"  -->
      <NavBar>
        <template slot="content">
          <div class="header-title">产品详情</div>
        </template>
        <template slot="right" v-if="isAndroid || isiOS">
          <img
            src="./img/share3.png"
            class="record-detail-nav-right"
            @click="$refs.shareWx.show = true"
          />
        </template>
      </NavBar>
    </div>
    <Loading :loading="loading">
      <div class="c-gvxnwb">
        <iframe
          :src="productUrl"
          frameborder="0"
          class="c-gvxnwb-frame"
          id="frame"
        ></iframe>

        <!-- <div v-html="html"></div> -->
      </div>
    </Loading>
    <ShareWx ref="shareWx" @handleShare="handleShare" />
  </div>
</template>
<script>
import NavBar from '@/components/h5header'
import Loading from '@/components/data-loading'
import { mapMutations, mapState } from 'vuex'
import ShareWx from '@/components/ShareWx'
import weixinShare from '@/services/h5/app-api/weixinShare.js'
import { isAndroid, isiOS } from '@/utils/platform'
// import axios from 'axios'
export default {
  components: { NavBar, Loading, ShareWx },
  data() {
    return {
      isAndroid,
      isiOS,
      productUrl: null,
      html: 'https://www.baidu.com'
    }
  },
  computed: {
    ...mapState('loading', ['loading'])
  },
  created() {
    this.setLoading(true)
    this.init()
  },
  mounted() {
    let frame = this.$el.querySelector('#frame')
    frame.style.width = frame.clientWidth + 'px'
  },
  methods: {
    ...mapMutations('loading', ['setLoading']),
    init() {
      this.productUrl = this.$route.query.productUrl
      setTimeout(() => {
        this.setLoading(false)
      }, 1000)
      // https://ceshi.wanlibaoxian.com/wlbx/riskProductApp/pingAnE2020Detail?productId=1345&agentId=792
      // axios
      //   .get(
      //     'wlbx/riskProductApp/pingAnE2020Detail?productId=1345&agentId=792',
      //     {
      //       baseURL: 'https://ceshi.wanlibaoxian.com/',
      //       accept: 'text/html, text/plain',
      //       headers: {
      //         'Access-Control-Allow-Origin': '*'
      //       },
      //       proxy: {
      //         host:
      //           'https://ceshi.wanlibaoxian.com/wlbx/riskProductApp/pingAnE2020Detail?productId=1345&agentId=792'
      //       }
      //     }
      //   )
      //   .then(res => {
      //     console.log('fdfddfdfdf', res)
      //   })

      // fetch(
      //   'https://ceshi.wanlibaoxian.com/wlbx/riskProductApp/pingAnE2020Detail?productId=1345&agentId=792',
      //   {
      //     'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
      //   }
      // )
      //   .then(res => {
      //     return res.json()
      //   })
      //   .then(json => {
      //     console.log('fdfsda==================', json)
      //   })
    },
    handleShare(val) {
      let {
        productName,
        productAbbrDescription,
        productUrl,
        logoUrl
      } = this.$route.query
      weixinShare({
        shareType: val,
        titleName: productName,
        describe: productAbbrDescription,
        imageUrl: logoUrl,
        shareUrl: productUrl
      })
    }
  }
}
</script>
<style scoped lang="less">
.online {
  position: relative;
  background-color: #fafafa;
}
.record-detail-nav-left {
  width: 17px;
  height: 17px;
}
.online-list {
  overflow-y: scroll;
  padding-bottom: 50px;
  &-header {
    position: relative;
    width: 375px;
    height: 375px;
    &-img {
      img {
        width: 375px;
        height: 375px;
      }
    }
    &-content {
      position: absolute;
      bottom: 23px;
      width: 345px;
      height: 88px;
      margin: 0 15px;
      text-align: center;
      background: #fff;
      opacity: 0.9;
      border-radius: 8px;
      box-shadow: #fff 0 0 7px 0;
      &-title {
        font-size: 21.5px;
        color: @c-color-primary;
        font-weight: bold;
        margin-top: 20px;
      }
      .c-kxchfz {
        width: 345px;
        margin-top: 10px;
        font-size: 13px;
        color: #333;
        &-line {
          height: 14.5px;
          border: 0.5px dashed #ccc;
          margin: 0 19.5px;
        }
        img {
          width: 12px;
          height: 11px;
          margin-right: 5px;
        }
      }
    }
  }
  &-item {
    margin-bottom: 13px;
    padding: 13px 0;
    background: #fff;
    width: 375px;
    &-title {
      margin-left: 10px;
      font-weight: bold;
      color: #333;
      font-size: 18px;
    }
    &-detail {
      flex: 1;
      font-size: 14px;
      color: @c-color-primary;
      text-align: right;
      padding-right: 15px;
    }
    &-content {
      margin: 13px 0;
      padding: 0 15px;
      font-size: 15px;
      color: #666;
      &-item {
        margin-top: 13px;
        &:first-child {
          font-weight: bold;
          color: #333;
          img {
            width: 16px;
            height: 17px;
            margin-right: 5px;
          }
          div {
            margin-right: 16.5px;
          }
        }
      }
    }
    &-bottom {
      margin: 0 15px;
      padding-top: 10px;
      border-top: 0.5px solid #f0f0f0;
      text-align: center;
      font-size: 13px;
      color: #bd893a;
    }
  }
  .c-dcqd9s-item-label {
    img {
      width: 23px;
      height: 23px;
      margin-right: 8px;
    }
    span {
      font-size: 14px;
      color: #444;
      letter-spacing: 0.25px;
    }
  }
  .c-dcqd9s-item-content {
    padding-left: 25px;
    font-size: 12px;
    color: #999;
  }
  .c-dcqd9s-more-question {
    margin-top: 6px;
    text-align: center;
    font-size: 12px;
    color: #999;
  }
}
.online-bottom {
  width: 375px;
  height: 50px;
  position: fixed;
  bottom: 0;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.05) 0 -1.5px 8px 0;
  &-text {
    flex: 1;
    font-size: 21px;
    color: @c-color-primary;
    font-weight: bold;
    padding-left: 15px;
    span:first-child {
      font-size: 15px;
      color: #333;
    }
    span:last-child {
      font-size: 15px;
      color: #999;
    }
  }
  &-btn {
    width: 120px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background: @c-color-primary;
  }
}
// 02
.c-we8zj3 {
  // margin-top: 20px;
  margin: 0 15px;
  font-size: 15px;
  color: #333;
  &-item {
    width: 345px;
    margin-top: 13px;
    padding-bottom: 15px;
    border-bottom: 0.5px solid #e9e9e9;
    &:last-child {
      border-bottom: none;
    }
    .c-uf7wfh {
      letter-spacing: 22.5px;
    }
    &-label {
      width: 80px;
    }
    &-value {
      flex: 1;
      margin-left: 60px;
      &-input {
        padding: 0;
        font-size: 15px;
      }
    }
    &-img {
      width: 7px;
      height: 13px;
    }
  }
}
// 03
.c-yr401t {
  width: 375px;
  margin-top: 20px;
}
// 04
.c-038r1g {
  margin-top: 20px;
  &-item {
    margin-top: 21.5px;
    padding: 0 15px;
    &-img {
      width: 31px;
      height: 31px;
      margin-right: 14px;
    }
    &-right-title {
      font-weight: bold;
      font-size: 15px;
      color: #333;
    }
    &-right-desc {
      font-size: 12px;
      color: #999;
      margin-top: 8px;
      .c-6501jj {
        color: @c-color-primary;
      }
    }
  }
}
.c-dfj9h4 {
  width: 1px;
  height: 13px;
  background-color: #ccc;
  margin: 0 20px;
}
.c-oukck1 {
  padding: 0 15px;
  font-size: 15px;
  font-weight: bold;
  color: #333;
  line-height: 22px;
  text-align: justify;
  margin-top: 8px;
  &-item {
    color: @c-color-primary;
  }
}
.c-gvxnwb {
  width: 375px;
  height: calc(100vh - 40px);
  overflow-y: scroll;
  &-frame {
    width: 100%;
    height: calc(100vh - 40px);
    // overflow-y: auto;
  }
}
</style>
